<template>
  <div>
    <p>动态路由demo</p>
    <p>UserList</p>
    <p>动态路由参数：</p>
    <ul>
      <li>$route.params.id: {{$route.params.id}}</li>
      <li>id: {{id}}</li>
      <li>$route.query.name: {{$route.query.name}}</li>
      <li>name: {{name}}</li>
    </ul>
    <el-button @click="onBack">返回</el-button>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  // props: {
  //   users: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  props: ['id', 'name'],
  data () {
    return {
      users: [
        {
          id: 1,
          name: 'John Doe',
          email: 'JohnDoe@test.com',
          role: 'admin'
        },
        {
          id: 2,
          name: 'Jane Doe',
          email: 'JaneDoe@test.com',
          role: 'user'
        }
      ]
    }
  },
  created () {
    console.log('当前的路由信息 route', this.$route)
    console.log('整体路由器信息 router', this.$router)
      // 动态参数变化 监听到了
    this.$watch(
      () => this.$route.params.id,
      (val, preVal) => {
        console.log("$watch动态路由参数发生变化",val, preVal)
      }
    )
  },
  /**
   * 组件内的路由守卫
   * @param {*} to 
   * @param {*} from 
   */
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log('beforeRouteEnter', vm, to, from)
    })
  },
  // 动态参数变化 没有被调用？？
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('beforeRouteUpdate before', to, from)
    next();
    console.log('beforeRouteUpdate after', to, from)
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('beforeRouteLeave', to, from);
    next();
  },
  methods: {
    onBack() {
      this.$router.go(-1)
    }
  }
}
</script>
